<template>
  <div class="today-recommend">
    <div class="container">
      <!-- 今日推荐 -->
      <div class="home-hero-sub row">
        <!-- 推荐右边 -->
        <div class="recommend-left">
          <ul class="home-channel-list clearfix">
            <li>
              <a
                href="https://www.mi.com/seckill/"
                data-log_code="31pchomepagefeatures_entrance001001#t=normal&amp;act=webview&amp;page=homepage&amp;page_id=10530&amp;bid=3480970.1"
              >
                <img
                  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&amp;h=48"
                  alt="小米秒杀"
                />
                小米秒杀
              </a>
            </li>

            <li>
              <a
                href="https://qiye.mi.com/"
                data-log_code="31pchomepagefeatures_entrance002001#t=normal&amp;act=webview&amp;page=homepage&amp;page_id=10530&amp;bid=3480970.2"
              >
                <img
                  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&amp;h=48"
                  alt="企业团购"
                />
                企业团购
              </a>
            </li>

            <li>
              <a
                href="https://www.mi.com/order/fcode"
                data-log_code="31pchomepagefeatures_entrance003001#t=normal&amp;act=webview&amp;page=homepage&amp;page_id=10530&amp;bid=3480970.3"
              >
                <img
                  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&amp;h=48"
                  alt="F码通道"
                />
                F码通道
              </a>
            </li>

            <li>
              <a
                href="https://www.mi.com/mimobile/"
                data-log_code="31pchomepagefeatures_entrance004001#t=normal&amp;act=webview&amp;page=homepage&amp;page_id=10530&amp;bid=3480970.4"
              >
                <img
                  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&amp;h=48"
                  alt="米粉卡"
                />
                米粉卡
              </a>
            </li>

            <li>
              <a
                href="https://huanxin.mi.com/"
                data-log_code="31pchomepagefeatures_entrance005001#t=normal&amp;act=webview&amp;page=homepage&amp;page_id=10530&amp;bid=3480970.5"
              >
                <img
                  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&amp;h=48"
                  alt="以旧换新"
                />
                以旧换新
              </a>
            </li>

            <li>
              <a
                href="https://recharge.10046.mi.com/"
                data-log_code="31pchomepagefeatures_entrance006001#t=normal&amp;act=webview&amp;page=homepage&amp;page_id=10530&amp;bid=3480970.6"
              >
                <img
                  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&amp;h=48"
                  alt="话费充值"
                />
                话费充值
              </a>
            </li>
          </ul>
        </div>
        <div class="recommend-right">
          <ul class="home-promo-list clearfix" id="J_homePromoList">
            <li class="first">
              <a
                href="https://www.mi.com/mi9/"
                data-log_code="31pchomepagecells_auto_fill000001#t=ad&amp;act=webview&amp;page=homepage&amp;page_id=10530&amp;bid=3480925.1&amp;adp=3117&amp;adm=14603"
              >
                <img
                  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/37d52be5170e1b25d30ff44db4b0791c.jpg?w=632&amp;h=340"
                  alt=""
                />
              </a>
            </li>

            <li class="">
              <a
                href="https://www.mi.com/mix3/"
                data-log_code="31pchomepagecells_auto_fill000001#t=ad&amp;act=webview&amp;page=homepage&amp;page_id=10530&amp;bid=3480925.2&amp;adp=3118&amp;adm=13948"
              >
                <img
                  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e7b51b721c3319e9c2916cc41cd9c695.jpg?w=632&amp;h=340"
                  alt=""
                />
              </a>
            </li>

            <li class="">
              <a
                href="https://www.mi.com/shouhuan4/"
                data-log_code="31pchomepagecells_auto_fill000001#t=ad&amp;act=webview&amp;page=homepage&amp;page_id=10530&amp;bid=3480925.3&amp;adp=3119&amp;adm=13592"
              >
                <img
                  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&amp;h=340"
                  alt=""
                />
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TodayRecommend",
}
</script>

<style lang="less" scoped>
// 推荐栏的样式
.home-hero-sub {
  margin-top: 14px;
}
.home-hero-sub .recommend-left {
  float: left;
  width: 234px;
}
.home-channel-list {
  margin: 0;
  padding: 3px;
  list-style-type: none;
  font-size: 12px;
  text-align: center;
  background: #5f5750;
}

.home-channel-list li {
  position: relative;
  float: left;
  width: 70px;
  height: 82px;
  padding: 0 3px;
}

.home-channel-list li:after,
.home-channel-list li:before {
  position: absolute;
  content: "";
  background: #665e57;
}

.home-channel-list li:before {
  top: -1px;
  left: 6px;
  width: 64px;
  height: 1px;
}

.home-channel-list li:after {
  top: 6px;
  left: 0;
  width: 1px;
  height: 70px;
}

.home-channel-list li.left:after,
.home-channel-list li.top:before {
  display: none;
}

.home-channel-list a {
  display: block;
  padding-top: 18px;
  text-overflow: ellipsis;
  color: #fff;
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.home-channel-list a:hover {
  opacity: 1;
  text-decoration: none;
}

.home-channel-list img {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto 4px;
}

// 右边的促销图片的样式
.recommend-right {
  float: left;
  margin-left: 14px;
  min-height: 1px;
  width: 978px;
}
.home-promo-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.home-promo-list li {
  float: left;
  width: 316px;
  height: 170px;
  margin-left: 15px;
  -webkit-transition: -webkit-box-shadow 0.2s linear;
  transition: -webkit-box-shadow 0.2s linear;
  transition: box-shadow 0.2s linear;
  transition: box-shadow 0.2s linear, -webkit-box-shadow 0.2s linear;
}

.home-promo-list li:hover {
  z-index: 2;
  -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.home-promo-list li.first {
  margin-left: 0;
}

.home-promo-list a {
  display: block;
  height: 170px;
  background: url(//i1.mifile.cn/f/i/2014/cn/placeholder-80.png) no-repeat 50%;
}

.home-promo-list img {
  display: block;
  width: 316px;
  height: 170px;
}

// 商品展示的 banner图
.home-banner-box {
  height: 120px;
  margin: 22px 0;
  overflow: hidden;
}
</style>
